<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        p{
            border:1px solid green;
        }
    </style>
</head>
<body>
<form name="baidu" action="https://baidu.com/s">
    <input autocomplete="off" name="wd" type="text">
    <button>搜索</button>
</form>
<div id="search"></div>
</body>
<script>
    const obj = {};
    function fn(obj){
        document.querySelector("#search").innerHTML = obj.g.map(item=>(`
            <p>${item.q}</p>
        `)).join("");
    }
    // 当输入内容时，需要创建一个script标签并指定请求的地址，地址中的wd的值即是输入的内容
    document.baidu.wd.oninput = function(){
        // console.log(this.value);// this.value指的是输入的内容
        // 创建script
        const script = document.createElement("script");// 创建一个名字script元素
        // 为script指定地址
        script.src=`https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=${this.value}&cb=fn`
        // 将创建好的元素放置到body尾部
        document.body.appendChild(script);
        document.body.removeChild(script);
    }
</script>
</html>